<template>
  <div class="dialog_no_award_container">
    <div class="dialog_no_award_content">
      <img src="../assets/img/dialog_no_award_text.png" class="dialog_no_award_text"/>
      <van-button class="dialog_award_btn dialog_share_btn animate__animated animate__headShake animate__infinite" @click="onOpenShare">邀请好友试试手气</van-button>
      <van-button class="dialog_award_btn animate__animated animate__headShake animate__infinite" @click="onNextPage">查看我的故事 </van-button>
    </div>
    <van-popup
      @click="onCloseShare"
      transition = "fade"
      class="popup"
      position="center"
      get-container="body"
      v-model="showShareTips">
      <img src="../assets/img/share_tips.png" class="tips"/>
    </van-popup>
  </div>
</template>
<script>
import { Popup, Button } from 'vant'
export default {
  name: 'NoAward',
  components: {
    [Popup.name]: Popup,
    [Button.name]: Button
  },
  data () {
    return {
      showShareTips: false
    }
  },
  methods: {
    onNextPage () {
      this.$sound && this.$sound.play()
      this.$emit('next-page')
    },
    onOpenShare () {
      this.showShareTips = true
      this.$sound && this.$sound.play()
    },
    onCloseShare () {
      this.showShareTips = false
      this.$sound && this.$sound.play()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../assets/css/mixin.scss";
.dialog_no_award_container {
  display: flex;
  flex-direction: column;
  justify-content: center;;
  align-items: center;
  @include abs_center();
}
.dialog_no_award_content {
  @include wh(596, 409);
  background: url(../assets/img/dialog_no_award_bg.png) center no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;;
  align-items: center;
}
.dialog_no_award_text {
  @include wh(354, 49);
}
.dialog_award_btn {
  @include wh(435, 77);
  background: url(../assets/img/dialog_btn_bg.png) center no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 36px;
  line-height: 77px;
  &.dialog_share_btn {
    margin: 48px auto 26px;
  }
  &.dialog_fill_form_btn {
    @include wh(359, 78);
    margin-top: 32px;
  }
}
.tips {
  @include wh(478, 518);
  margin: 90px auto 0 191px;
}
</style>
